<template>
  <div class="page-container" :style="'height:' + windowHeight + 'px'">
    <!--顶部-->
    <div class="user-box">
      <div class="user-info">
        <div class="user-avatar">
          <van-icon size="50px" class-prefix="icon" name="default-avatar" />
        </div>
        <div class="user-login">立即登录</div>
      </div>
    </div>
    <!--订单列表-->
    <div class="order-box">
      <div class="order-item" v-for="(item, index) in orderList" :key="index">
        <div class="order-icon">
          <van-icon
            size="30px"
            class-prefix="icon"
            :name="item.icon"
            :color="item.color"
          />
        </div>
        <div class="order-label">{{ item.label }}</div>
      </div>
    </div>
    <!--功能列表-->
    <div class="function-box">
      <div
        class="function-item"
        v-for="(item, index) in functionList"
        :key="index"
        :style="item.icon == 'money' ? 'position:relative' : ''"
      >
        <div :class="'icon icon-' + item.icon" :style="'color:' + item.color">
          <span style="color: #000; font-size: 14px; margin-left: 10px">{{
            item.label
          }}</span>
        </div>
        <div v-if="item.icon == 'money'" class="left-money">
          &yen;{{ money }}
        </div>
        <div>
          <van-icon
            size="24px"
            class-prefix="icon"
            name="arrow-right"
            color="#dedfe1"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
let windowHeight = ref(0);
let money = ref(0);
onMounted(async () => {
  windowHeight.value = window.screen.height;
});
const orderList = [
  {
    icon: "ticket",
    label: "电影订单",
    color: "#ffc82f",
  },
  {
    icon: "goods",
    label: "商品订单",
    color: "#c6da5c",
  },
];
const functionList = [
  {
    icon: "coupon",
    label: "卖座券",
    color: "#f69377",
  },
  {
    icon: "hongbao",
    label: "组合红包",
    color: "#f8ca78",
  },
  {
    icon: "money",
    label: "余额",
    color: "#ffc82f",
  },
  {
    icon: "service",
    label: "帮助与客服",
    color: "#5d91b6",
  },
  {
    icon: "setting",
    label: "设置",
    color: "#e8eec6",
  },
];
</script>
<style>
@import "../src/assets/css/mine.css";
</style>
